<template>
	<view>
		<u-popup :show="show" @close="show=false" :safeAreaInsetBottom="safeAreaInsetBottom" mode="center" round="20">
			<view class="select_members">
				<view class="h1">
					<text>选择会员权限</text>
				</view>
				<view class="u-flex-x-center contener" @click="authority_show=true,show=false">
					<text class="label">权限</text>
					<view class="u-flex-between down_border u-flex">
						<text>{{user.name?user.name:''}}</text>
						<view class="down">
							<image :src="`${$http_cos}/static/down.png`"></image>
						</view>
					</view>
				</view>
				<view class="u-flex-x-center contener">
					<text class="label">时间</text>
					<view class="u-flex-between down_border u-flex"  v-if="user.days==0">
						
						<text>无限期</text>
						
					</view>
					<view class="u-flex-between down_border u-flex"  v-if="user.days!=0" @click="pickerVisible=true,show=false">
						<text v-if="user.days>0">{{modelValues.endTime}}</text>
						<text v-else>{{user.days}}</text>
						<view class="down">
							<image :src="`${$http_cos}/static/down.png`"></image>
						</view>
					</view>
				</view>
				<view class="u-flex-x-center contener" v-if="user.type==0">
					<text class="label">积分</text>
					<view class="u-flex-between down_border u-flex">
						<input  type="number" placeholder="请输入赠送的积分" v-model="user.integral"/>
					</view>
				</view>
				<view class="u-flex-between u-flex">
					<view class="btn disagree" @click="show=false">
						<text>取消</text>
					</view>
					<view class="btn agree" @click="submit">
						<text>确定</text>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- :maxDate="currentTime('maxDate',18)" :minDate="currentTime('minDate',53)" -->
		<u-datetime-picker v-model="modelValue" :show="pickerVisible"
			mode="date" :itemHeight="80" title="结束时间" @close="pickerVisible=false,show=true" @cancel="pickerVisible=false,show=true" @confirm="confirm_data"
			 closeOnClickOverlay 
			:showToolbar="showToolbar" />
		<u-picker :show="authority_show" :immediateChange="immediateChange" :showToolbar="showToolbar" :columns="columns" :itemHeight="80" title="权限"
			@cancel="cancel" keyName="name" @confirm="authority_submit"></u-picker>
	</view>
	
</template>

<script>
	import {getMemberList} from '@/common/api.js'
	export default {
		name: 'yyPicker',
		props: {
			value: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				immediateChange:true,
				authority_show:false,
				safeAreaInsetBottom:false,
				show:false,
				user:{},
				modelValue: Number(new Date()),
				columns:[],
				showToolbar: false,
				pickerVisible:false,
			}
		},
		watch:{
			modelValue:{
				handler(value) {
					// console.log('深度监听', value)
				},
				deep: true // 深度监听
			}
		},
		computed: {
			modelValues: {
				get() {
					return this.value
				},
				set(value) {
					console.log('modelValue', value)
					this.$emit('input', value)
				}
			},
		},
		onLoad() {
		},
		methods: {
			result(time,mode) {
				const timeFormat = uni.$u.timeFormat,
					toast = uni.$u.toast
				if (time == undefined || time == '') {
					return ''
				}
				switch (mode) {
					case 'datetime':
						return timeFormat(time, 'yyyy-mm-dd hh:MM')
					case 'date':
						return timeFormat(time, 'yyyy-mm-dd')
					case 'year-month':
						return timeFormat(time, 'yyyy-mm')
					case 'time':
						return time
					default:
						return ''
				}
			},
			confirm_data(e){
				this.modelValue=e.value
				this.user.days=this.result(this.modelValue,'date')
				
				this.pickerVisible=false
				this.show=true
				
			},
			init(){
				try {
					if (uni.getStorageSync('access_token')) {
						this.get_Member_List()
					} else {
					}		
				} catch (e) {
					//TODO handle the exception
				}
			},
			authority_submit(e) {
				this.user = e.value[0]
				this.cancel()
			},
			cancel() {
				this.show = true
				this.authority_show = false
			},
			get_Member_List() {
				getMemberList({
						custom: {
							auth: false,
							toast: false,
							catch: false
						}
					}).then((r) => {
					this.columns = [r]
					this.user = r[0]
				}).catch((err) => {
			
				})
			},
			shut_down(){
				this.$emit('close')
				
			},
			open(){
					this.show=true
					this.init()
			},
			close(){
				this.show=false
			},
			submit() {
				let isclick=true
				if(isclick){
					isclick=false
					this.$emit('change_time',this.user)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-popup__content{
		z-index: 22222;
	}
	.select_members {
		padding: 45rpx 36rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 46rpx;
		width: 650rpx;
		// height: 520rpx;
		z-index: 32222;
	
		.h1 {
			font-size: 32rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #111111;
			text-align: center;
			width: 100%;
			padding: 10rpx 0 48rpx;
		}
	
		.share-contnet {
			width: 100%;
			height: 100vh;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 777;
	
			.share-bj {
				width: 100%;
				height: 100%;
				background-color: #333333;
				opacity: 0.8;
				z-index: 888;
				position: absolute;
			}
	
			.share-image {
				width: 100%;
				height: 100%;
				display: flex;
	
				image {
					z-index: 999;
					width: 800rpx;
					margin-top: 200rpx;
				}
			}
		}
	
		.contener {
			align-items: center;
			margin-bottom: 24rpx;
	
			.label {
				display: block;
				white-space: nowrap;
			}
	
			text {
				font-size: 28rpx;
				font-weight: 400;
				color: #111111;
			}
	
			.down_border {
				margin-left: 27rpx;
				border: 2rpx solid #C2C2C2;
				border-radius: 20rpx;
				background: #ffffff;
				height: 88rpx;
				width: 454rpx;
				align-items: center;
				padding: 0 34rpx 0 32rpx;
	
				.down {
					width: 20rpx;
					height: 12rpx;
				}
			}
	
		}
	}
</style>